import { Compiler } from './Compiler.js'
import { Observer } from './Observer.js'
/**
  Vue核心类
	1. 接收选项数据
	2. data注入Vue实例(供compiler使用)
	3. 调用Observer，实 现数据劫持
	4. 调用Compiler 解析指令与模板插值
 */
export class Vue {
	constructor(options) {
		// 1. 保存选项的数据
		this.$options = options || {}
		this.$data = options.data || {}
		const el = options.el
		this.$el = typeof options.el === 'string' ? document.querySelector(el) : el
		// 2. 负责把 data 注入到 Vue 实例
		this.proxyData(this.$data)
		// 3. 负责调用 Observer 实现数据劫持
		new Observer(this.$data)
		// 4. 负责调用 Compiler 解析指令/插值表达式等
		new Compiler(this)
	}
	proxyData(data) {
		// 遍历 data 的所有属性
		Object.keys(data).forEach(key => {
			Object.defineProperty(this, key, {
				get() {
					return data[key]
				},
				set(newValue) {
					if (data[key] === newValue) {
						return
					}
					data[key] = newValue
				},
			})
		})
	}
}
